<template>
<div>
  <el-form :model="formData" ref="formData" label-width="100px" class="demo-ruleForm formt">
    <el-form-item label="上 传：" prop="name">
      <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="formData.fileList" :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">上传文档，支持DOCX,office2007,2010,2013,2016：</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="定时发布：" prop="name">
      <el-date-picker v-model="formData.value1" type="date" placeholder="选择日期">
      </el-date-picker>
      <span class="tips">* 仅v1及以上代理生效.该时间为提交时间,不代表最终出稿时间.默认为即时提交.</span>
    </el-form-item>
    <el-form-item label="文章标题：" prop="name">
      <el-input type="text" placeholder="建议25字内,不要出现特殊字符,否则容易乱码" v-model="formData.text" maxlength="40" show-word-limit class="title">
      </el-input>
      <span class="tips">* 建议与来源标题一致，避免产生纠纷（不保证一定使用来源标题或当前标题）</span>
    </el-form-item>
    <el-form-item label="所属客户：" prop="name">
      <el-input type="text" placeholder="用于记录文章所属客户,非必填项" class="title">
      </el-input>
    </el-form-item>
    <el-form-item label="备 注：" prop="name">
      <el-input type="text" placeholder="与平台原有媒体信息相矛盾的备注无效！" class="title">
      </el-input>
    </el-form-item>
    <el-form-item label="内 容：" prop="name">
      <el-row>
        <quill-editor :options="formData.editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
        </quill-editor>
      </el-row>
    </el-form-item>

  </el-form>

</div>
</template>

<script>
export default {
  props: [
    'formData'
  ],
  data() {
    return {

    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    onEditorBlur(editor) { //失去焦点事件
    },
    onEditorFocus(editor) { //获得焦点事件
    },
    onEditorChange({
      editor,
      html,
      text
    }) { //编辑器文本发生变化
      //this.变量可以实时获取到当前编辑器内的文本内容
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
    width: 341px;
    input {
        width: 341px;
    }
}
.quill-editor {
    height: 508px;
    max-width: 1000px;
    /deep/.ql-container {
        height: 421px;
    }
}

</style>
